<%--
  Created by IntelliJ IDEA.
  User: cic
  Date: 2023/10/21
  Time: 23:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>yeeZiWWWu.com-全球超级购物网站</title>
    <style type="text/css">
        body {
            margin: 0;
        }


        /*滚动条*/
        .rigth-content-bottom{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            margin: 0;
            margin-top: 0;
            overflow: scroll;
            height: 1000px;
        }

        /*上框架——包含logo和导航*/
        .topArea{
            float:left;/*居于页面左边*/
            position: fixed;top:0px;left: 20px;
            background-color: whitesmoke ;
            opacity:0.8;
            width:94%;/*宽度*/
            height: 155px;/*高度*/
        }


        /* 头部——图标 */
        .header_icon {
            float:left;/*居于页面左边*/
            width:200px;/*宽度*/
            height: 135px;/*高度*/
            text-align: center;/*文本居中对齐*/
            background-image: url("椰子.png"); /*设置盒子背景*/    /*当图片属于网页内容时，必须使用img元素*/ /*当图片仅用于美化页面时，必须使用背景图*/
            background-repeat: no-repeat;
            background-size: 100%; /* 调整背景图片大小以适应页面 */
        }


        /*!*头部——功能菜单主按钮式导航*!*/
        *{padding: 20px;margin: 10px;font-size: 30px} /*padding导航宽度//margin导航下滑位置//front-size标签字体大小*/
        nav{ width:1005px;height: 30px;background-color: whitesmoke ;opacity:0.9;position: fixed; top: 25px; left: 330px}/*此处的position是修改底框*/
        .main{width: 88%;margin:0;height: 30px}
        nav a{
            display: inline-block;
            font-family: '黑体';/*功能按钮字体*/
            color: indigo;/*功能按钮字体颜色*/
            text-decoration: none;
            width: 200px;/*每个标签的宽度*/
            height: 100%;
            /*text-align: center;!*标签文字居中*!*/
            line-height: 1px;/*字体位置*/
        }
        nav a:hover{/*鼠标指针移动到按钮时变色*/
            background: gold;
        }


        /*———— 搜索条 ———— */
        /*搜索底框*/
        .search_box {
            overflow: hidden;
            width:35%;/*宽度*/
            height: 10px;/*高度*/
            text-align: left;/*文本靠左对齐*/
            /*border:5px black solid;!*盒子边框颜色*!*/
            background-color: whitesmoke;
        }
        /*搜索文本条*/
        input{
            position: fixed;top: 100px;left: 400px;/*文本条位置*/
            font-size: 20px;/*文本条里面的字体大小*/
            width: 410px;/*文本条宽度*/
            border: 1px solid #e2e2e2;
            height: 50px;
            float: left;
            background-repeat: no-repeat;
            background-size: 25px;
            background-position: 5px center;
            pading:0 0 0 4px;
        }
        /*搜索键*/
        #search{
            position: fixed;top: 100px;right: 650px;
            width: 5%;
            height: 10px;
            float: right;
            background: black;
            color: white;
            text-align: center;
            line-height: 35px;
            cursor: pointer;
        }
        /* 搜索图标 */
        .search_icon {
            float: right;/*居于页面右边*/
            padding: 23px;/*盒子大小*/
            border-radius: 50%; /*盒子边框圆角设置*/
            background-image: url("搜索图标.jpg"); /*设置盒子背景*/
            background-repeat: no-repeat;
            background-size: 100%; /* 调整背景图片大小以适应页面 */
        }


        /*轮播器———— 广告展示区 */
        #ad{
            position: fixed;top:205px; left: 330px;
            width:74%;/*宽度**/
            height: 600px;/*高度*/
            background-image:url("广告.jpg");
            background-size: cover; /* 调整背景图片大小以适应页面 */

        }
        #leftbtn,#rightbtn{
            position: absolute;
            top: calc(44% - 20px);
            color: #fff;
            font-size: 40px;
            cursor: pointer;
        }
        #leftbtn{left: 10px;}
        #rightbtn{right: 10px;}


        /*左侧商品一级菜单导航可视化*/
        .merchandiseMenu{
            opacity: 0.9;/*底框颜色透明度*/
            position: fixed;top:350px; left: 20px;/*底框在页面的位置*/
            float: left;/*居于页面右边*/
            width:15%;/*宽度*/
            height: 470px;/*长度*/
            border-radius: 10%; /*边框圆角设置*/
            background-color: whitesmoke ;/*底框背景*/
        }
        .contentMerchandise>ul{
            position: fixed;top: 350px;/*设置文本垂直面位置*/ left: 0;/*设置水平方向上的位置*/
            font-size: 500px;
            list-style-type: none;
            line-height :0px;

        }
        .contentMerchandise>ul>li{
            height: 10px;/*高度*/
        }
        .contentMerchandise>ul>li:hover{ /*鼠标触动框*/
            margin-top: 30px;
            width: 30px;
            height: 0px;
            opacity: 0.1;/*透明度*/
            border-radius: 10%; /*边框圆角设置*/
            background: gainsboro;/*鼠标移动到按钮的颜色*/
        }
        .contentMerchandise a{
            position: fixed;
            left: 15px;/*设置水平方向上的位置*/
            text-align: left;/*文本靠左对齐*/
            display: block;/*按钮的分布——垂直*/
            width: 200px;/*标签的宽度*/
            text-decoration: none;
            font-size: 20px;/*字体大小*/
            color: indigo;/*字体颜色*/
        }
        .contentMerchandise span{
            font-weight: normal;/*字体粗细*/
        }

        /*!*左侧商品二级菜单导航可视化*!*/
        /*.contentMerchandise .content1{*/
        /*    width: 300px;*/
        /*    background-color: yellow;*/
        /*    left: 50px;*/
        /*    top: 0;*/
        /*    bottom: 0;*/
        /*    display: none;*/
        /*    border: 1px solid black;!*二级显示菜单边框*!*/
        /*}*/
        /*.contentMerchandise ol{*/
        /*    background: #fff;*/
        /*    list-style-type: none;*/
        /*    font-size: 12px;*/
        /*    display: flex;*/
        /*    flex-direction: column;*/
        /*    !*设置子元素在父容器由上至下排列*!*/
        /*    width: auto;*/
        /*    heigh:400px;*/
        /*    flex-wrap: wrap;*/
        /*}*/
        /*.contentMerchandise ul>li:hover .content1{*/
        /*    display: block;*/
        /*}*/
        /*.contentMerchandise ol>li{*/
        /*    background: white;*/
        /*    height: 70px;*/
        /*    width: 200px;*/
        /*    line-height: 70px;*/
        /*    flex-grow: 0;*/
        /*    flex-shrink: 0;*/
        /*}*/
        /*.contentMerchandise ol span{*/
        /*    font-size: 10px;*/
        /*    color: #000;*/
        /*}*/

        /* 欢迎界面--头部——图标 */
        .header_user_icon {
            float: right;/*居于页面右边*/
            padding: 45px;/*盒子大小*/
            border-radius: 50%; /*盒子边框圆角设置*/
            background-image: url("椰子商家.jpeg"); /*设置盒子背景*/
            background-size: cover; /* 调整背景图片大小以适应页面 */
        }
        /* 欢迎框 */
        .header_user {
            position:fixed; top: 205px;left: 20px;
            opacity:0.9;
            float: left;/*居于页面右边*/
            width:15%;/*宽度*/
            height: 100px;/*高度*/
            border-radius: 10%; /*盒子边框圆角设置*/
            background-color: whitesmoke ;
            /*background-color: rgba(255, 255, 255, 0.8); !* 设置表单的背景颜色和透明度 *!*/
            background-size: cover; /* 调整背景图片大小以适应页面 */
        }
        /*登录*/
        .loginUser{
            position:fixed; top: 213px;left: 130px;
            width:2%;/*宽度*/
            height: 5px;/*高度*/
            border-radius: 10%; /*盒子边框圆角设置*/
            background-color: lightsalmon;
        }
        .loginMerchant{
            position:fixed; top: 213px;left: 210px;
            width:2.5%;/*宽度*/
            height: 5px;/*高度*/
            border-radius: 10%; /*盒子边框圆角设置*/
            background-color: lightgreen;
        }
        /*注册*/
        .sign_in{
            position:fixed; top: 263px;left: 140px;
            width:6%;/*宽度*/
            height: 2px;/*高度*/
            border-radius: 10%; /*盒子边框圆角设置*/
            background-color: lightyellow;
        }

        /*主页面背景*/
        body {
            background-image: url("网站页面.png"); /* 设置背景图片 */
            /*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
            /* 背景图片全屏 */
            background-repeat:no-repeat;
            background-attachment: fixed;
            /*background-size:cover;*/
            background-size: 100% 100%;
        }
    </style>
</head>


<body>

<!--头部领域--><div class="topArea"></div>



<!--图标可视化--><div class="header_icon" style="position:fixed; top: 20px; left: 60px"></div>


<!--头部——功能菜单主按钮式导航-->
<nav>
    <div class="main"style="opacity:0.8;position:fixed; top: 5px; left: 310px"><!--此处的position是修改触动框-->
        <a href="#">首页</a>
        <a href="#">买家中心</a>
        <!--        <div class="content1">-->
        <!--            <ol>-->
        <!--                <li><a href="#">上架商品 </a><span></span></li>-->
        <!--                <li><a href="#">修改商品信息</a><span></span></li>-->
        <!--                <li><a href="#">查看订单</a><span></span></li>-->
        <!--            </ol>-->
        <!--        </div>-->
        <a href="#">卖家中心</a>
        <a href="serviceSite.jsp">客服中心</a>
    </div>
</nav>


<!--搜索条可视化-->
<div class="search_box" style="opacity:0.8;position:fixed; top: 100px; left: 330px" >
    <!--嵌入搜索头像-->
    <div class="search_icon" style="position: fixed;top: 105px;left: 335px;"></div>
    <input type="search" name ="search" placeholder="请输入要搜索的商品类型">
    <div id="search" >
        <a href="#" style="font-size:20px;position: fixed;top: 88px;right: 670px;" >搜索</a>
    </div>
</div>


<!--欢迎商家可视化--><!--opacity:0.7;设置透明度-->
<div class="header_user" >
    <div class="header_user_icon" style="position:fixed; top: 210px;left: 35px"></div>
    <p style="font-family: '华文楷体';color: saddlebrown;font-size:20px;position:fixed; top: 290px; left: 50px">Hi~这里是yeeZiWu</p>

    <a href="UserLogin.jsp"><div class="loginUser">  <p style="font-size:15px;position: fixed;top: 205px;left:  115px;" >用户login</p>  </div></a>
    <a href="ManageLogin.jsp"><div class="loginMerchant">   <p style="font-size:15px;position: fixed;top: 205px;left:  195px;" >商家login</p>  </div></a>

    <a href="webSite_entry.jsp"> <div class="sign_in">   <p style="font-size:20px;position: fixed;top: 251px;left: 140px;" >注册 signin</p>  </div></a>
</div>

<!--左侧商品一级菜单导航-->
<div class="merchandiseMenu">
    <div class="contentMerchandise">
        <p style="font-weight:bold;font-size: 25px;color: black;position: fixed;top: 350px;left: 20px">商品分类区</p>
        <ul>
            <li><a href="#">智能家电 数码产品</a><span></span>
                <!--                <div class="content1">-->
                <!--                    <ol>-->
                <!--                        <li><a href="#">电视 冰箱 洗碗机 扫地机 </a><span></span></li>-->
                <!--                        <li><a href="#">相机 无人机 蓝牙音箱</a><span></span></li>-->
                <!--                    </ol>-->
                <!--                </div>-->
            </li>
            <li><a href="#">服装配饰 包包鞋子</a><span></span></li>
            <li><a href="#">食品酒水 蔬菜水果</a><span></span></li>
            <li><a href="#">图书 文具</a><span></span></li>
            <li><a href="#">电脑 办公</a><span></span></li>
            <li><a href="#">清洁 日用</a><span></span></li>
            <li><a href="#">美妆 日化</a><span></span></li>
        </ul>
    </div>
</div>

<!--轮播图：主商品可视化-->
<div id="ad">
    <div id="leftbtn">&lt;</div>
    <div id="rightbtn">&gt;</div>
</div>
<script>
    //使用数组定义图片路径和图片描述
    var imgsURL=['广告.jpg','广告1.jpg','广告2.jpg','商品展示.png'];
    //DOM操作，获取HTML组件
    var arrowleft=document.getElementById("leftbtn");
    var arrowRight=document.getElementById("rightbtn");
    //为元素添加事件监听器
    arrowleft.addEventListener("click",preMove);
    arrowRight.addEventListener("click",nextMove);
    //定义全局变量，表示当前使用的照片为索引
    var index=0;
    //左箭头单击函数
    function preMove(){
        index--;
        if (index<0) index=3;
        //使用数组索引改变轮播盒子的背景图片路劲
        document.getElementById('ad').style.backgroundImage='url('+imgsURL[index]+')';
    }
    //右箭头单击函数
    function nextMove(){

        index++;
        if(index>3) index=0;
        document.getElementById('ad').style.backgroundImage='url('+imgsURL[index]+')';
    }
    //自动放映
    setInterval(nextMove,1800);//每隔1500毫秒调用一次nextMove函数
</script>
</body>
</html>